<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>图片高亮</title>
</head>
<style>
    input{
        margin: 20px 0;
    }
</style>

<body>
    <h1>图片高亮调整</h1>
    高亮：<input type="range" id="exposureRange" min="-100" max="100" value="0"><span id="exposureValueBox">0</span>
    <button id="download" onclick="download()">图片下载</button>
    <br>
    <input type="file" id="fileInput" accept="image/*">
    <p>
        <canvas id="canvas"></canvas>

    </p>
   
    <script>
      const exposureRange = document.getElementById('exposureRange');
      const fileInput = document.getElementById('fileInput');
      const exposureValueBox = document.getElementById('exposureValueBox');
      const canvas = document.getElementById('canvas');
      const ctx = canvas.getContext('2d');
      let originalImageData;
      let exposureValue;
      let url = null
   
      exposureRange.addEventListener('input', function (event) {
        exposureValue = parseInt(exposureRange.value);
        exposureValueBox.innerHTML = exposureValue
        highlightImage(exposureValue);
      });
   
      fileInput.addEventListener('change', function (event) {
        var file = event.target.files[0];
        var reader = new FileReader();
        reader.onload = function (event) {
          var img = new Image();
          img.onload = function () {
            canvas.width = img.width;
            canvas.height = img.height;
            ctx.drawImage(img, 0, 0);
            originalImageData = img;
          }
          img.src = event.target.result;
        }
        reader.readAsDataURL(file);
      });
   
      function highlightImage(brightnessValue = 0) {
        const img = originalImageData.cloneNode(); // 使用原始图像的副本
        const imgCanvas = document.createElement('canvas');
        const imgCtx = imgCanvas.getContext('2d');
        imgCanvas.width = img.width;
        imgCanvas.height = img.height;
        imgCtx.drawImage(img, 0, 0);
        const imageData = imgCtx.getImageData(0, 0, imgCanvas.width, imgCanvas.height);
        const data = imageData.data;
        for (let i = 0; i < data.length; i += 4) {
          data[i] = clamp(data[i] + brightnessValue, 0, 255); // Red channel
          data[i + 1] = clamp(data[i + 1] + brightnessValue, 0, 255); // Green channel
          data[i + 2] = clamp(data[i + 2] + brightnessValue, 0, 255); // Blue channel
        }
        imgCtx.putImageData(imageData, 0, 0);
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        ctx.drawImage(imgCanvas, 0, 0);
        url = imgCanvas.toDataURL("image/png");
      }
   
      function clamp(value, min, max) {
        return Math.min(Math.max(value, min), max);
      }

      function download(){
            // let canvas = document.querySelector('canvas')
            if(!url) return alert('请处理后下载！')
            let a = document.createElement('a')
            // let newUrl = canvas.toDataURL("image/png");
            a.href = url
            a.download = 'img.png'
            a.click()
      }
</script>
  </body>

</html>